<template>
<div class="regCompany">
    <div class="maxw-1200 m-auto card">
        <div class="steps">
            <a-steps :current="current">
                <a-step :title='step.title' v-for="(step,index) in steps" :key="index"></a-step>
            </a-steps>
        </div>
        <div class="content">
            <!-- 第1步 -->
            <step0 v-if="current==0"></step0>
            <!-- 第2步 -->
            <step1 v-if="current==1"></step1>
            <!-- 第3步 -->
            <step2 v-if="current==2"></step2>
            <!-- 第4步 -->
            <step3 v-if="current==3"></step3>
        </div>
    </div>
</div>
</template>

<script>
import {
    useStore
} from "vuex";
import {ref,computed} from 'vue';
import Step0 from './step0.vue'
import Step1 from './step1.vue'
import Step2 from './step2.vue'
import Step3 from './step3.vue'
export default {
    components: {
        Step0,
        Step1,
        Step2,
        Step3,
    },
    setup() {
        const store = useStore();
        const state = store.state;
        const current  = computed( () => state.regCompanyStepsCurrent)  
        const steps = [{
                title: '注册用户'
            },
            {
                title: '选择注册地'
            },
            {
                title: '填写公司登记信息'
            },
            {
                title: '提交审核办证'
            },
        ]
        return {
            state,
            steps,
            current
        }
    }
};
</script>

<style lang="less" scoped>
.regCompany {
    background-color: rgba(246, 246, 250, 1);
    padding: 40px 0 60px;

    .steps {
        padding: 40px;
    }

    .content {
        box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.3);
    }
}
</style>
